<template>
  <!-- <el-dialog
    :title="!dataForm.id ? '新增' : '修改'"
    :close-on-click-modal="false"
    :visible.sync="visible"> -->
    <div id="mesproductioninforecord-add-or-update">
    <h2>生产指示卡</h2>
    <table border="1" cellspacing="0" width="90%">
      <tr>
        <td colspan="2">机加工</td>
        <td colspan="5">
          <span>2018年8月31日</span>
          <span style="float:right;padding-right:10px">18-1313</span>
        </td>
        <td>QR/8.5/06</td>
      </tr>
      <tr>
        <td colspan="3">图番</td>
        <td>支番</td>
        <td>分卡号</td>
        <td>受注数</td>
        <td>材质</td>
        <td>单重</td>
      </tr>
      <tr>
        <td colspan="3">
          <input v-model="dataForm.internalEnterpriseNum">
        </td>
        <td>
          <input v-model="dataForm.branchNum">
        </td>
        <td>
          <input v-model="dataForm.cardNum">
        </td>
        <td>
          <input v-model="dataForm.orderQuantity">
        </td>
        <td>
          <input v-model="dataForm.instructionsQuantity">
        </td>
        <td>1530</td>
      </tr>
      <tr>
        <td colspan="2">指示数</td>
        <td>件/吊</td>
        <td colspan="2">出荷日</td>
        <td>成品库存</td>
        <td>半成品库存</td>
        <td>不良率</td>
      </tr>
      <tr>
        <td colspan="2">66</td>
        <td>2</td>
        <td colspan="2">2018年10月16日</td>
        <td>1</td>
        <td>3</td>
        <td>#N/A</td>
      </tr>
      <tr>
        <td></td>
        <td>工序</td>
        <td>投入数</td>
        <td>开始日期</td>
        <td>完成日期</td>
        <td>完成数量</td>
        <td>不良数</td>
        <td>操作人</td>
      </tr>
      <tr>
        <td rowspan="2">一课</td>
        <td>压蜡</td>
        <td>
          <input>
        </td>
        <td>
          <input>
        </td>
        <td>
          <input>
        </td>
        <td>
          <input>
        </td>
        <td>
          <input>
        </td>
        <td>
          <input>
        </td>
      </tr>
      <tr>
        <td>组立</td>
        <td>
          <input>
        </td>
        <td>
          <input>
        </td>
        <td>
          <input>
        </td>
        <td>
          <input>
        </td>
        <td>
          <input>
        </td>
        <td>
          <input>
        </td>
      </tr>
      <tr>
        <td>二课</td>
        <td>制壳</td>
        <td>
          <input>
        </td>
        <td>
          <input>
        </td>
        <td>
          <input>
        </td>
        <td>
          <input>
        </td>
        <td>
          <input>
        </td>
        <td>
          <input>
        </td>
      </tr>
      <tr>
        <td>三课</td>
        <td>铸造</td>
        <td>
          <input>
        </td>
        <td>
          <input>
        </td>
        <td>
          <input>
        </td>
        <td>
          <input>
        </td>
        <td>
          <input>
        </td>
        <td>
          <input>
        </td>
      </tr>
      <tr>
        <td>四课</td>
        <td>切断</td>
        <td>
          <input>
        </td>
        <td>
          <input>
        </td>
        <td>
          <input>
        </td>
        <td>
          <input>
        </td>
        <td>
          <input>
        </td>
        <td>
          <input>
        </td>
      </tr>
      <tr>
        <td rowspan="15">
          <span>五课至品检</span>
        </td>
        <td>修正</td>
        <td>
          <input>
        </td>
        <td>
          <input>
        </td>
        <td>
          <input>
        </td>
        <td>
          <input>
        </td>
        <td>
          <input>
        </td>
        <td>
          <input>
        </td>
      </tr>
      <tr>
        <td>矫正</td>
        <td>
          <input>
        </td>
        <td>
          <input>
        </td>
        <td>
          <input>
        </td>
        <td>
          <input>
        </td>
        <td>
          <input>
        </td>
        <td>
          <input>
        </td>
      </tr>
      <tr>
        <td>喷砂</td>
        <td>
          <input>
        </td>
        <td>
          <input>
        </td>
        <td>
          <input>
        </td>
        <td>
          <input>
        </td>
        <td>
          <input>
        </td>
        <td>
          <input>
        </td>
      </tr>
      <tr>
        <td>初检</td>
        <td>
          <input>
        </td>
        <td>
          <input>
        </td>
        <td>
          <input>
        </td>
        <td>
          <input>
        </td>
        <td>
          <input>
        </td>
        <td>
          <input>
        </td>
      </tr>
      <tr>
        <td>外协</td>
        <td>
          <input>
        </td>
        <td>
          <input>
        </td>
        <td>
          <input>
        </td>
        <td>
          <input>
        </td>
        <td>
          <input>
        </td>
        <td>
          <input>
        </td>
      </tr>
      <tr>
        <td>终检</td>
        <td>
          <input>
        </td>
        <td>
          <input>
        </td>
        <td>
          <input>
        </td>
        <td>
          <input>
        </td>
        <td>
          <input>
        </td>
        <td>
          <input>
        </td>
      </tr>
      <tr>
        <td>
          <input>
        </td>
        <td>
          <input>
        </td>
        <td>
          <input>
        </td>
        <td>
          <input>
        </td>
        <td>
          <input>
        </td>
        <td>
          <input>
        </td>
        <td>
          <input>
        </td>
      </tr>
      <tr>
        <td colspan="7">不良详细</td>
      </tr>
      <tr>
        <td>蜡件不良</td>
        <td colspan="2">
          <input>
        </td>
        <td>浇不足</td>
        <td>
          <input>
        </td>
        <td>切断</td>
        <td>
          <input>
        </td>
      </tr>
      <tr>
        <td>粘接不良</td>
        <td colspan="2">
          <input>
        </td>
        <td>气孔</td>
        <td>
          <input>
        </td>
        <td>磨光</td>
        <td>
          <input>
        </td>
      </tr>
      <tr>
        <td>气豆</td>
        <td colspan="2">
          <input>
        </td>
        <td>缩孔</td>
        <td>
          <input>
        </td>
        <td>磕碰</td>
        <td>
          <input>
        </td>
      </tr>
      <tr>
        <td>裂壳</td>
        <td colspan="2">
          <input>
        </td>
        <td>夹渣</td>
        <td>
          <input>
        </td>
        <td>喷砂</td>
        <td>
          <input>
        </td>
      </tr>
      <tr>
        <td>漏壳</td>
        <td colspan="2">
          <input>
        </td>
        <td>夹砂</td>
        <td>
          <input>
        </td>
        <td>硬度</td>
        <td>
          <input>
        </td>
      </tr>
      <tr>
        <td>脱壳</td>
        <td colspan="2">
          <input>
        </td>
        <td>胀壳</td>
        <td>
          <input>
        </td>
        <td>夹砂</td>
        <td>
          <input>
        </td>
      </tr>
      <tr>
        <td>
          <input>
        </td>
        <td colspan="2">
          <input>
        </td>
        <td>
          <input>
        </td>
        <td>
          <input>
        </td>
        <td>
          <input>
        </td>
        <td>
          <input>
        </td>
      </tr>
      <tr>
        <td rowspan="4" style="writing-mode: vertical-lr;writing-mode: tb-lr;height:80px;width:50px">一次合格率统计</td>
        <td colspan="3">总数量</td>
        <td colspan="4">修正原因统计</td>
      </tr>
      <tr>
        <td colspan="3">
          <input>
        </td>
        <td>修正数量</td>
        <td>修正原因</td>
        <td>修正数量</td>
        <td>修正原因</td>
      </tr>
      <tr>
        <td colspan="3">一次合格数量</td>
        <td>
          <input>
        </td>
        <td>
          <input>
        </td>
        <td>
          <input>
        </td>
        <td>
          <input>
        </td>
      </tr>
      <tr>
        <td colspan="3">
          <input>
        </td>
        <td>
          <input>
        </td>
        <td>
          <input>
        </td>
        <td>
          <input>
        </td>
        <td>
          <input>
        </td>
      </tr>
      <tr>
        <td>
          <span>注意事项</span>
        </td>
        <td colspan="7">
          <textarea value="矫正 固溶化 机加工" rows="5"></textarea>
        </td>
      </tr>
    </table>
    <div class="footer">
      <el-button type="primary" @click="dataFormSubmit()">保存</el-button>
      <el-button @click="cancle">取消</el-button>
    </div>
    </div>
  <!-- </el-dialog> -->
</template>

<script>
export default {
  data() {
    return {
      visible: false,
      dataForm: {
        internalEnterpriseNum: 0,
        branchNum: '18-1',
        cardNum: '1/1',
        orderQuantity: '60',
        instructionsQuantity: 'scs13',
        pieceCnt: '',
        failureRate: '',
        totalQuantity: '',
        qualifiedQuantity: '',
        modifyCauseOne: '',
        modifyCountOne: '',
        modifyCauseTwo: '',
        modifyCountTwo: '',
        comments: ''
      },
      dataRule: {
        branchNum: [
          { required: true, message: '支番不能为空', trigger: 'blur' }
        ],
        cardNum: [
          { required: true, message: '分卡号不能为空', trigger: 'blur' }
        ],
        orderQuantity: [
          { required: true, message: '受注数不能为空', trigger: 'blur' }
        ],
        instructionsQuantity: [
          { required: true, message: '指示数不能为空', trigger: 'blur' }
        ],
        pieceCnt: [
          { required: true, message: '件/吊不能为空', trigger: 'blur' }
        ],
        failureRate: [
          { required: true, message: '不良率不能为空', trigger: 'blur' }
        ],
        totalQuantity: [
          { required: true, message: '总数量不能为空', trigger: 'blur' }
        ],
        qualifiedQuantity: [
          { required: true, message: '一次合格数量不能为空', trigger: 'blur' }
        ],
        modifyCauseOne: [
          { required: true, message: '一次修正原因不能为空', trigger: 'blur' }
        ],
        modifyCountOne: [
          { required: true, message: '一次修正数量不能为空', trigger: 'blur' }
        ],
        modifyCauseTwo: [
          { required: true, message: '二次修正原因不能为空', trigger: 'blur' }
        ],
        modifyCountTwo: [
          { required: true, message: '二次修正数量不能为空', trigger: 'blur' }
        ],
        comments: [
          { required: true, message: '注意事项不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  mounted() {
    this.init(this.$route.params.id)
  },
  methods: {
    init(id) {
      this.dataForm.internalEnterpriseNum = id || 2901
      this.$nextTick(() => {
        // this.$refs['dataForm'].resetFields()
        if (this.dataForm.internalEnterpriseNum) {
          this.$http({
            url: this.$http.adornUrl(
              `/production/mesproductioninforecord/info/${
                this.dataForm.internalEnterpriseNum
              }`
            ),
            method: 'get',
            params: this.$http.adornParams()
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.dataForm.branchNum = data.mesproductioninforecord.branchNum
              this.dataForm.cardNum = data.mesproductioninforecord.cardNum
              this.dataForm.orderQuantity =
                data.mesproductioninforecord.orderQuantity
              this.dataForm.instructionsQuantity =
                data.mesproductioninforecord.instructionsQuantity
              this.dataForm.pieceCnt = data.mesproductioninforecord.pieceCnt
              this.dataForm.failureRate =
                data.mesproductioninforecord.failureRate
              this.dataForm.totalQuantity =
                data.mesproductioninforecord.totalQuantity
              this.dataForm.qualifiedQuantity =
                data.mesproductioninforecord.qualifiedQuantity
              this.dataForm.modifyCauseOne =
                data.mesproductioninforecord.modifyCauseOne
              this.dataForm.modifyCountOne =
                data.mesproductioninforecord.modifyCountOne
              this.dataForm.modifyCauseTwo =
                data.mesproductioninforecord.modifyCauseTwo
              this.dataForm.modifyCountTwo =
                data.mesproductioninforecord.modifyCountTwo
              this.dataForm.comments = data.mesproductioninforecord.comments
            }
          })
        }
      })
    },
    // 表单提交
    dataFormSubmit() {
      this.$http({
        url: this.$http.adornUrl(
          `/production/mesproductioninforecord/${
            !this.$route.params.id ? 'save' : 'update'
          }`
        ),
        method: 'post',
        data: this.$http.adornData({
          internalEnterpriseNum:
            this.dataForm.internalEnterpriseNum || undefined,
          branchNum: this.dataForm.branchNum,
          cardNum: this.dataForm.cardNum,
          orderQuantity: this.dataForm.orderQuantity,
          instructionsQuantity: this.dataForm.instructionsQuantity,
          pieceCnt: this.dataForm.pieceCnt,
          failureRate: this.dataForm.failureRate,
          totalQuantity: this.dataForm.totalQuantity,
          qualifiedQuantity: this.dataForm.qualifiedQuantity,
          modifyCauseOne: this.dataForm.modifyCauseOne,
          modifyCountOne: this.dataForm.modifyCountOne,
          modifyCauseTwo: this.dataForm.modifyCauseTwo,
          modifyCountTwo: this.dataForm.modifyCountTwo,
          comments: this.dataForm.comments
        })
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.$message({
            message: '操作成功',
            type: 'success',
            duration: 1500,
            onClose: () => {
              eventBus.$emit('closeCurrentPage')
            }
          })
        } else {
          this.$message.error(data.msg)
        }
      })
    },
    // 取消
    cancle() {
      eventBus.$emit('closeCurrentPage')
    }
  }
}
</script>
<style lang="scss">
#mesproductioninforecord-add-or-update {
  h2 {
    text-align: center;
  }
  table {
    width: 90%;
    margin: 0 auto;
  }
  table tr {
    height: 20px;
    line-height: 20px;
    text-align: center;
  }
  table tr td {
    padding: 0;
    box-sizing: border-box;
  }
  table tr td input {
    padding: 0;
    width: 100%;
    border: none;
    outline: none;
    text-align: center;
    line-height: 20px;
  }
  table tr td:first-of-type {
  }
  table tr td:first-of-type span {
    display: inline-block;
    width: 26px;
  }
  textarea {
    width: 100%;
    padding: 0;
    box-sizing: border-box;
    outline: none;
    border: none;
  }
  .footer {
    text-align: center;
    margin-top: 20px;
  }
}
</style>
